Ext.define("Ext.ux.form.IconRadio",{
	  extend: 'Ext.form.field.Base',
	  alias: ['widget.iconradiofield', 'widget.iconradio'],
	  alternateClassName: 'Ext.form.IconRadio',
	  requires: ['Ext.XTemplate', 'Ext.form.CheckboxManager'],
	  childEls: [
	        'boxLabelEl',
	        'innerWrapEl',
	        'displayEl'
	  ],
	  
	  fieldSubTpl: [
	        '<div id="{cmpId}-innerWrapEl" data-ref="innerWrapEl" role="presentation"',
	            ' class="{wrapInnerCls}">',
	            '<tpl if="labelAlignedBefore">',
	                '{beforeBoxLabelTpl}',
	                '<label id="{cmpId}-boxLabelEl" data-ref="boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} ',
	                        '{boxLabelCls}-{ui} {boxLabelCls}-{boxLabelAlign} {noBoxLabelCls} {childElCls}" for="{id}">',
	                    '{beforeBoxLabelTextTpl}',
	                    '{boxLabel}',
	                    '{afterBoxLabelTextTpl}',
	                '</label>',
	                '{afterBoxLabelTpl}',
	            '</tpl>',
	            '<span id="{cmpId}-displayEl" data-ref="displayEl" role="presentation" class="{fieldCls} {typeCls} ',
	                '{typeCls}-{ui} {inputCls} {inputCls}-{ui} {childElCls} {afterLabelCls}">',
	                '<div class="btn-group">',
	                '<tpl foreach="options">',
	                ' <a class="btn btn-default" href="#">'
	                 '<i class="{iconCls}" title="{text}"></i>'
	                 '</a>',
	                '</tp>',
	                '</div>',
	            '</span>',
	            '<tpl if="!labelAlignedBefore">',
	                '{beforeBoxLabelTpl}',
	                '<label id="{cmpId}-boxLabelEl" data-ref="boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} ',
	                        '{boxLabelCls}-{ui} {boxLabelCls}-{boxLabelAlign} {noBoxLabelCls} {childElCls}" for="{id}">',
	                    '{beforeBoxLabelTextTpl}',
	                    '{boxLabel}',
	                    '{afterBoxLabelTextTpl}',
	                '</label>',
	                '{afterBoxLabelTpl}',
	            '</tpl>',
	        '</div>',
	        {
	            disableFormats: true,
	            compiled: true
	        }
	    ],

	    publishes: {
	        checked: 1
	    },

	    subTplInsertions: [
	        
	        'beforeBoxLabelTpl',

	        
	        'afterBoxLabelTpl',

	        
	        'beforeBoxLabelTextTpl',

	        
	        'afterBoxLabelTextTpl',

	        
	        'boxLabelAttrTpl',

	        'inputAttrTpl'
	    ],
	    getSubmitValue: function() {
	        return this.checked ? this.inputValue : null;
	    },

	    onChange: function(newVal, oldVal) {
	        var me = this,
	            ownerCt = me.ownerCt,
	            r, rLen, radio, radios;

	        me.callParent(arguments);
	        
	        if (newVal) {
	            radios = me.getManager().getByName(me.name, me.getFormId()).items;
	            rLen = radios.length;

	            for (r = 0; r < rLen; r++) {
	                radio = radios[r];

	                if (radio !== me) {
	                    radio.updateValueFromDom();
	                }
	            }
	        }

	        if (ownerCt && ownerCt.isRadioGroup && ownerCt.simpleValue) {
	            ownerCt.checkChange();
	        }
	    },
});